@extends('layouts.appDomain')

@section('content')
    <div class="container py-5">
        <input type="hidden" id="serverId" value="{{$server->id}}">
        <input type="hidden" id="serverConfig" value='{!! json_encode($server->ext??config('conf.serverDef')) !!}'>
        <input type="hidden" id="userMoney" value='{{\App\Models\Account::getAccount($server)->money}}'>

        <div class="card-header">角色列表</div>

        <el-table
                :data="characters"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="角色名称">
            </el-table-column>
            <el-table-column
                    label="等级"
                    sortable>
                <template slot-scope="scope">
                    <el-button v-if="serverConfig.payforlevel=='1'" size="mini" type="warning" @click="showDialogLevel(scope.row)" plain icon="el-icon-top">@{{ scope.row.level }} </el-button>
                    <span v-else>@{{ scope.row.level }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="种族">
                <template slot-scope="scope">
                    <component-character-race :race="scope.row.race"></component-character-race>
                </template>
            </el-table-column>

            <el-table-column
                    label="职业">
                <template slot-scope="scope">
                    <component-character-class :c="scope.row.class"></component-character-class>
                </template>
            </el-table-column>

            <el-table-column
                    label="在线时间"
                    sortable>
                <template slot-scope="scope">
                    <el-tooltip v-if="serverConfig.timetomoney=='1'" :content="'可兑换 '+parseInt(scope.row.totaltime/(60*serverConfig.timetomoneyRatio))+' '+(serverConfig.timetoscore==='1'?'积分':'金币')" placement="right">
                        <el-button size="mini" type="warning" plain icon="el-icon-coin" @click="showDialogMoney(scope.row)">@{{ parseInt(scope.row.totaltime/60) }} 分钟</el-button>
                    </el-tooltip>
                    <span v-else>@{{ parseInt(scope.row.totaltime/60) }} 分钟</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="在线状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.online===1" type="success"><i class="el-icon-success" ></i> 在线</el-tag>
                    <el-tag v-else-if="scope.row.logout_time>0" type="info">@{{ timestampToTime(scope.row.logout_time) }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <el-dialog :title="'在线时间兑换'+(serverConfig.timetoscore==='1'?'积分':'金币')" v-if="charSelect" width="300px" :visible.sync="dialogMoney" :show-close="false" :close-on-click-modal="false">
        <el-slider
                v-model="selectMoney"
                :min="1"
                :max="parseInt(charSelect.totaltime/(60*serverConfig.timetomoneyRatio))">
        </el-slider>
        <div class="text-right mt-3 h6">
            + @{{selectMoney}} @{{ serverConfig.timetoscore==='1'?'积分':'金币' }}
            <br>
            - @{{ selectMoney*serverConfig.timetomoneyRatio }} 分钟游戏时间
            <br>
            剩余 @{{ parseInt(charSelect.totaltime/60) - selectMoney*serverConfig.timetomoneyRatio }} 分钟游戏时间
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMoney = false">取 消</el-button>
            <el-button type="primary" @click="timeToMoney()">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="角色升级" v-if="charSelect" width="300px" :visible.sync="dialogLevel" :show-close="false" :close-on-click-modal="false">
        <el-slider
                v-model="selectLevel"
                :min="1"
                :max="serverConfig.payforlevelMax">
        </el-slider>
        <div class="text-right mt-3 h6">
            <div class="mb-3">
                <el-button size="mini" @click="selectLevel=charSelect.level+1">升 1 级</el-button>
                <el-button size="mini" @click="selectLevel= parseInt(serverConfig.payforlevelMax)">最高等级</el-button>
            </div>


             @{{ charSelect.name }} @{{ charSelect.level }}级 -> @{{  selectLevel }}级
            <br>
            <span v-if="levelMoney.type==1">- @{{ levelMoney.price }} 积分</span>
            <span v-else-if="levelMoney.type==-1">目标等级必须大于当前角色的等级</span>
            <span v-else-if="levelMoney.type==-2">(积分不足) - @{{ levelMoney.price }}积分</span>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogLevel = false">取 消</el-button>
            <el-button type="primary" @click="levelUp()" :disabled="levelMoney.type!=1">确 定</el-button>
        </div>
    </el-dialog>

@endsection

@section('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                serverId:$('#serverId').val(),
                serverConfig: JSON.parse($('#serverConfig').val()),
                userMoney:$('#userMoney').val(),

                dialogMoney:false,
                selectMoney:1,
                dialogLevel:false,
                selectLevel: parseInt(JSON.parse($('#serverConfig').val()).payforlevelMax),

                charSelect:null,

                characters:[]
            },
            mounted() {
                this.getCharacters();
            },
            computed:{
                levelMoney:function () {
                    let res={
                        type:0,
                        price:0
                    };
                    if (this.charSelect && this.selectLevel>0){
                        res.price=(this.selectLevel-this.charSelect.level)*this.serverConfig.moneyForPerLevel;
                        if (this.charSelect.level<this.selectLevel) {
                            // let msg='';
                            if (res.price>this.userMoney){
                                res.type=-2;
                                // msg =  '(积分不足) ';
                            }else{
                                res.type=1;
                                // msg+= ' - '+ price +' 积分';
                            }
                        }else {
                            res.type=-1;
                            // return '目标等级必须大于当前角色的等级';
                        }
                    }
                    return res;
                }
            },
            methods: {
                getCharacters:function () {
                    post('/user/getCharacters',{},res=>{
                        console.log(res);
                        this.characters=res.data;
                    },this)
                },
                ChrRaces:ChrRaces,
                GetClass:GetClass,
                showDialogMoney($item){
                    let t=this;
                    t.selectMoney=1;
                    let count=parseInt($item.totaltime/(60*t.serverConfig.timetomoneyRatio));
                    if (count===0){
                        t.$alert('游戏时间不够兑换金币: '+t.serverConfig.timetomoneyRatio+'分钟 兑换 1 金币', '提示', {
                            confirmButtonText: '确定'
                        });
                    }else if (count===1){
                        t.charSelect=$item;
                        t.$confirm('可消耗 '+t.serverConfig.timetomoneyRatio+'分钟 游戏时间兑换 1 金币, 是否兑换?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            t.timeToMoney();
                        }).catch(() => {});
                    }else{
                        t.charSelect=$item;
                        t.dialogMoney=true;
                    }

                },
                showDialogLevel($item){
                    let t=this;
                    if ($item.level===parseInt(t.serverConfig.payforlevelMax)){
                        t.$alert('此角色已经是最高等级', '提示', {
                            confirmButtonText: '确定'
                        });
                    }else{
                        t.selectLevel=parseInt(t.serverConfig.payforlevelMax);
                        t.charSelect=$item;
                        t.dialogLevel=true;
                    }

                },
                timeToMoney(){
                    let t=this;
                    post('/user/timeToMoney',{
                        guid:t.charSelect.guid,
                        count:t.selectMoney
                    },res=>{
                        alert(t.serverConfig.timetoscore==='1'?'兑换成功！':'兑换成功! 请查看角色邮件!');
                        location.reload();
                    },t)
                },
                levelUp(){
                    let t=this;
                    post('/user/payForLevel',{
                        guid:t.charSelect.guid,
                        toLevel:t.selectLevel
                    },res=>{
                        alert('角色升级成功!');
                        location.reload();
                        // t.charSelect.level=t.selectLevel;
                        // t.userMoney=res.data;
                        // t.$message({
                        //     type: 'success',
                        //     message: '升级成功! 请登录角色查看'
                        // });
                        // t.dialogLevel=false;
                    },t)
                }
            }
        });

        function timestampToTime(timestamp) {
            var date = new Date(timestamp*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());

            strDate = Y+M+D+h+m+s;
            return strDate;

        }
    </script>
@endsection
